<template>
  <view class="pick-num-wrap">
    <view class="pick-group" v-if="status[timestamp.status]">
      <view class="num-box">
        <text class="tes">您已选号：</text>
        <view class="numbers">
          <view
            class="item-number"
            v-for="(item, index) in intervals"
            :key="index"
            >{{ item }}</view
          >
          <view
            class="item-number"
            hover-class="hover-bubble"
            v-if="list.chose_list.length >= 7"
            @tap="lookMore"
            ><u-icon name="more-dot-fill"></u-icon
          ></view>
        </view>
      </view>
      <view class="count"
        >已参与 ({{ list.chose_list.length }} / {{ total }})
      </view>
      <view class="todo" v-if="timestamp.status == 0 || timestamp.status == 3"
        ><view class="tex-s"> {{ status[timestamp.status] }} </view>
        <u-count-down
          :timestamp="timestamp.time"
          @change="onChangeCountDown"
          @end="onEnd"
          class="down-s"
        >
          <text class="time">{{ hour }}:{{ minute }}:{{ second }}</text>
        </u-count-down>
      </view>
      <view class="todo-text" v-else :class="timestamp.status == 2 ? 'end' : ''"
        >{{ status[timestamp.status] }}
      </view>
      <view class="bubble" v-if="more">
        <view
          class="item-number"
          v-for="(item, index) in list.chose_list"
          :key="index"
          >{{ item }}</view
        >
      </view>
    </view>
  </view>
</template>
<script>
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  props: {
    list: {
      type: Object,
      default: () => ({}),
    },
    total: {
      type: [String, Number],
      default: 10,
    },
    timestamp: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      timeData: 0,
      more: false,
      status: ['待开奖', '已开奖', '已退款', '开奖中'],
    };
  },
  // 计算属性 适配者模式
  computed: {
    hour() {
      let d = parseInt(this.timeData / 60 / 60 / 24);
      let s = parseInt((this.timeData / 60 / 60) % 24);
      let e = d * 24 + s;
      return e >= 10 ? e : '0' + e;
    },
    minute() {
      let s = parseInt((this.timeData / 60) % 60);
      return s >= 10 ? s : '0' + s;
    },
    second() {
      let s = parseInt(this.timeData % 60);
      return s >= 10 ? s : '0' + s;
    },
    intervals() {
      let arr = [];
      if (this.list.chose_list.length >= 7) {
        arr = this.list.chose_list.slice(0, 7);
      } else {
        arr = this.list.chose_list;
      }
      return arr;
    },
  },
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {},
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    lookMore() {
      this.more = !this.more;
    },
    onChangeCountDown(e) {
      this.timeData = e;
      // console.log(e);
    },
    onEnd() {
      this.$emit('end', this.timeData);
    },
  },
};
</script>
<style lang="scss" scoped>
.pick-num-wrap {
  padding: 10rpx 28rpx 30rpx;
  width: 100%;
  min-height: 155rpx;

  .pick-group {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    padding: 24rpx 16rpx;
    width: 100%;
    height: 167rpx;
    border-radius: 20rpx;
    border: 2rpx solid rgba(50, 169, 225, 1);
    box-shadow: 0 0 1rpx 8rpx rgba(42, 67, 130, 1);

    .bubble {
      display: flex;
      flex-wrap: wrap;
      position: absolute;
      bottom: 155rpx;
      right: 0;
      z-index: 6;
      padding: 30rpx 26rpx 15rpx;
      width: 100%;
      min-height: 100rpx;
      border-radius: 20rpx;
      background-color: rgba(27, 46, 93, 1);
      filter: drop-shadow(0 0 2rpx rgba(50, 169, 225, 1));
      animation: scale-in-br 0.6s linear 0s 1 normal none;
      &::before {
        content: '';
        position: absolute;
        bottom: -30rpx;
        left: calc(130rpx + (60rpx * 8));
        width: 0;
        height: 0;
        border: 16rpx solid transparent;
        border-left: 10rpx solid transparent;
        border-right: 10rpx solid transparent;
        border-top-color: rgba(27, 46, 93, 1);
      }
      .item-number {
        margin: 0 11rpx 15rpx;
      }
    }

    .count {
      margin-top: 20rpx;
      font-size: 24rpx;
      font-weight: bold;
      color: #7adeff;
    }
    .todo-text,
    .todo {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      right: 28rpx;
      bottom: -20rpx;
      border-radius: 26rpx;
      height: 51rpx;
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.96, 0.86);
        width: 100%;
        height: 100%;
        border: 2rpx solid #000000;
        border-radius: 26rpx;
      }
    }

    .todo-text {
      padding: 6rpx 30rpx;
      text-align: center;
      font-size: 24rpx;
      font-weight: 600;
      color: rgba(0, 0, 0, 1);
      // #BBE7FD-#A6B7FC-#E4D5FD
      background: linear-gradient(45deg, #bbe7fd 0%, #a6b7fc 51%, #e4d5fd 100%);
      &.end {
        // #EDEDED-#BFBFBF
        background: linear-gradient(90deg, #ededed 0%, #bfbfbf 51%);
      }
      &::after {
        content: '';
        transform: translate(-50%, -50%) scale(0.9, 0.76);
      }
    }
    .todo {
      width: 225rpx;

      background: linear-gradient(
        131deg,
        #5ee5b7 0%,
        #c5f6e9 51%,
        #f3f6a0 100%
      );

      .tex-s {
        margin-right: 6rpx;
        font-size: 24rpx;
        font-weight: 600;
        color: rgba(0, 0, 0, 1);
      }
    }
  }
}
.down-s {
  display: flex;
  align-items: center;
  height: 100%;
}
.time {
  display: flex;
  align-items: center;
  color: rgba(255, 136, 0, 1);
  font-weight: 600;
  font-size: 24rpx;
  line-height: 1;
}
.num-box {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  font-weight: 500;
  color: #ffffff;

  .tes {
    flex-shrink: 0;
  }
  .numbers {
    margin-left: 4rpx;
    display: flex;
    flex-wrap: wrap;
  }
}
.item-number {
  margin: 0 8rpx;
  width: 51rpx;
  height: 50rpx;
  background-image: radial-gradient(
    circle at 100% 0,
    #938ef5 33.333%,
    #c881c2 100%
  );

  font-size: 32rpx;
  font-weight: bold;
  color: #ffffff;
  line-height: 50rpx;
  text-align: center;
  border-radius: 50%;
}
</style>
